import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, TouchableWithoutFeedback, Clipboard, CameraRoll, Platform} from 'react-native';
import RNFetchBlob from 'react-native-fetch-blob'

import {appInfo} from '../../../common/config';

export default class extends Component {
    state = {
        isSaving: false
    };
    //复制
    copy = () => {
        let {showToast, wechatMobile} = this.props;
        Clipboard.setString(wechatMobile);
        showToast('复制成功');
    };
    saveImg = () => {
        const {qr, showToast} = this.props;

        RNFetchBlob
            .config({
                fileCache: true
            })
            .fetch('GET', qr, {
                //some headers ..
            })
            .then((res) => {
                let path = Platform.OS === 'android' ? 'file://' + res.path() : '' + res.path();
                CameraRoll.saveToCameraRoll(path)
                    .then(() => {
                        showToast('保存成功');
                    })
                    .catch(e => {
                        console.error(e);
                        showToast('保存失败，请重试');
                    })
                    .finally(() => {
                        this.setState({
                            isSaving: false
                        });
                    });
            });
    };

    render() {
        const {qr, wechatMobile} = this.props;
        return (
            <View style={styles.container}>
                <Image source={require('../../../images/logo.png')} style={styles.logo}/>
                <Image source={{uri: qr}} style={styles.qr}/>
                <Text style={styles.title}>{appInfo.name}微信公众号</Text>
                <View style={styles.btnWrap}>
                    <TouchableWithoutFeedback onPress={this.saveImg}>
                        <View style={styles.btnInner}>
                            <Text style={[styles.btnText, {color: '#fff'}]}>保存二维码到手机</Text>
                        </View>
                    </TouchableWithoutFeedback>

                    <View style={[styles.btnInner, {backgroundColor: '#ff8702'}]}>
                        <Text style={[styles.btnText, {color: '#fff', flex: 1}]}>专属客服微信：{wechatMobile}</Text>
                        <TouchableWithoutFeedback onPress={this.copy}>
                            <View style={styles.copyWrap}>
                                <Text style={[styles.btnText, {color: '#e0442e'}]}>复制</Text>
                            </View>
                        </TouchableWithoutFeedback>
                    </View>
                </View>
                <Text style={styles.time}>服务时间：周一至周六 9:00-18:00</Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        paddingTop: 40,
        flex: 1
    },
    logo: {
        width: 72,
        height: 72,
        borderRadius: 36
    },
    qr: {
        width: 100,
        height: 100,
        position: 'relative',
        marginTop: 6,
        marginBottom: 24
    },
    title: {
        color: '#3e3e3e',
        fontSize: 13
    },
    btnWrap: {
        width: '78%',
        marginTop: 32,
        marginBottom: 4
    },
    btnInner: {
        flexDirection: 'row',
        borderRadius: 36,
        marginBottom: 16,
        height: 36,
        backgroundColor: '#e0442e',
        justifyContent: 'center',
        alignItems: 'center'
    },
    copyWrap: {
        flexDirection: 'row',
        height: 34,
        width: 60,
        marginRight: 1,
        borderBottomRightRadius: 34,
        borderTopRightRadius: 34,
        backgroundColor: '#fff',
        justifyContent: 'center',
        alignItems: 'center'
    },
    btnText: {
        textAlign: 'center'
    },
    time: {
        color: '#9c9c9c',
        fontSize: 11
    }
});